<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>教材版本详情 - 睿途教育</title>
    <link href="../../assets/css/tailwind.css" rel="stylesheet">
    <link href="../../assets/css/font-awesome.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 font-sans text-gray-800">
    <div class="min-h-screen flex flex-col">
        <!-- 顶部导航栏（复用母版） -->
        <main class="flex-1 container mx-auto px-4 py-6">
            <!-- 面包屑导航 -->
            <div class="flex items-center text-sm text-gray-500 mb-4">
                <a href="../base.admin.html" class="hover:text-primary">首页</a>
                <i class="fa fa-angle-right mx-2 text-gray-300"></i>
                <a href="../Textbook/list.html" class="hover:text-primary">教材管理</a>
                <i class="fa fa-angle-right mx-2 text-gray-300"></i>
                <a href="list.html" class="hover:text-primary">教材版本列表</a>
                <i class="fa fa-angle-right mx-2 text-gray-300"></i>
                <span class="text-primary font-medium">版本详情</span>
            </div>
            <!-- 页面标题和操作 -->
            <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-6 gap-4">
                <div>
                    <h2 class="text-2xl font-bold text-gray-800">2023年秋季版 - 上册</h2>
                    <p class="text-gray-500 mt-1">版本基本信息及章节管理</p>
                </div>
                <button class="bg-primary text-white px-4 py-2 rounded-md font-medium shadow hover:bg-primary/90 transition-all">
                    <i class="fa fa-edit mr-1"></i>编辑版本
                </button>
            </div>
            <!-- 版本基本信息 -->
            <div class="bg-white rounded-xl shadow p-6 mb-8">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <p class="text-gray-500 mb-1">版本名称</p>
                        <p class="font-medium text-gray-900">2023年秋季版</p>
                    </div>
                    <div>
                        <p class="text-gray-500 mb-1">学期</p>
                        <p class="font-medium text-gray-900">上册</p>
                    </div>
                    <div>
                        <p class="text-gray-500 mb-1">年份</p>
                        <p class="font-medium text-gray-900">2023</p>
                    </div>
                    <div>
                        <p class="text-gray-500 mb-1">创建时间</p>
                        <p class="font-medium text-gray-900">2023-02-01</p>
                    </div>
                </div>
            </div>
            <!-- 章节树结构 -->
            <div class="bg-white rounded-xl shadow p-6">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-semibold text-gray-800">章节目录</h3>
                    <button class="bg-primary text-white px-4 py-2 rounded-md font-medium shadow hover:bg-primary/90 transition-all">
                        <i class="fa fa-plus mr-1"></i>新增章节
                    </button>
                </div>
                <!-- 简单树形结构示例 -->
                <ul class="pl-2">
                    <li class="mb-2">
                        <div class="flex items-center gap-2">
                            <span class="font-medium text-gray-800">第一章 有理数</span>
                            <button class="text-gray-400 hover:text-primary"><i class="fa fa-edit"></i></button>
                            <button class="text-danger hover:text-red-600"><i class="fa fa-trash"></i></button>
                            <button class="text-primary"><i class="fa fa-plus"></i> 子章节</button>
                        </div>
                        <ul class="pl-6 mt-1">
                            <li class="mb-1 flex items-center gap-2">
                                <span class="text-gray-700">1.1 正数和负数</span>
                                <button class="text-gray-400 hover:text-primary"><i class="fa fa-edit"></i></button>
                                <button class="text-danger hover:text-red-600"><i class="fa fa-trash"></i></button>
                            </li>
                            <li class="mb-1 flex items-center gap-2">
                                <span class="text-gray-700">1.2 有理数的加减法</span>
                                <button class="text-gray-400 hover:text-primary"><i class="fa fa-edit"></i></button>
                                <button class="text-danger hover:text-red-600"><i class="fa fa-trash"></i></button>
                            </li>
                        </ul>
                    </li>
                    <li class="mb-2">
                        <div class="flex items-center gap-2">
                            <span class="font-medium text-gray-800">第二章 整式的加减</span>
                            <button class="text-gray-400 hover:text-primary"><i class="fa fa-edit"></i></button>
                            <button class="text-danger hover:text-red-600"><i class="fa fa-trash"></i></button>
                            <button class="text-primary"><i class="fa fa-plus"></i> 子章节</button>
                        </div>
                    </li>
                </ul>
            </div>
        </main>
    </div>
</body>
</html> 